<script>
import KtScrollView from "../../../uni_modules/kantboot-framework-uniapp/components/kt-scroll-view/kt-scroll-view.vue";
import KtCarousel from "../../../uni_modules/kantboot-framework-uniapp/components/kt-carousel/kt-carousel.vue";
import FpCoursePanel from "../../../components/fp-course-panel/fp-course-panel.vue";

export default {
  name: "pageHomeCourse",
  components: {FpCoursePanel, KtCarousel, KtScrollView},
  data() {
    return {
      // 组件高度
      height: 0,
      // 组件高度
      navBarHeight: 0,
      // 是否加载完成
      isLoad: false,
      scrollTop: 0,
    };
  },
  mounted() {
    // 获取导航栏高度
    // this.navBarHeight = this.$refs.navBar.getHeight();
    // 获取#navBarInMessage的高度
    this.$kt.event.emit('changeTabbar', ()=>{
      this.$nextTick(() => {
        uni.createSelectorQuery()
            .in(this)
            .select("#navBarInHomeCourse")
            .boundingClientRect((res) => {
              this.navBarHeight = res.height;
            })
            .exec();
      });

    });
  },
  methods: {
    scroll(res){
      this.scrollTop = this.$kt.util.pxToRpx(res.target.scrollTop);
    }
  }
}
</script>

<template>
  <view>
    <view class="bg"></view>
    <view id="navBarInHomeCourse">
      <kt-nav-bar
          ref="navBar"
          :icon="$kt.file.byPath('tabbar/home-selected.svg')"
          :title="$i18n.zhToGlobal('首页')"></kt-nav-bar>
    </view>


    <scroll-view
        :style="'height: calc(100vh - '+navBarHeight+'px - 20rpx)'"
        scroll-y
        @scroll="scroll"
    >
      <view class="box">
        <kt-carousel
            type-code="ad"
        ></kt-carousel>
        <view style="height: 20rpx"></view>
        <fp-course-panel
            :header-fixed="scrollTop>400"
            :header-top="'calc('+navBarHeight+'px + 180rpx)'"
        ></fp-course-panel>
        <view style="height: 100rpx"></view>
      </view>
    </scroll-view>
  </view>


</template>

<style scoped lang="scss">
.box {
  padding: 20rpx;
  box-sizing: border-box;
}
.bg{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  // 从白到黑的渐变，从上到下
  background: linear-gradient(to bottom, #ffffff 300rpx, #f0f0f0 100%);
}
</style>